<template>
  <div
    class="diy-nav-bar"
    :style="[
      `padding:${diyItem.style.mt}px ${diyItem.style.mr}px ${diyItem.style.mb}px ${diyItem.style.ml}px `,
    ]"
  >
    <div
      class="diy-nav-bar-list"
      :class="
        (diyItem.style.shade == 1 ? 'style-shade' : '') +
        ' rows-' +
        diyItem.layout.rows_num
      "
      :style="[
        `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
        `background:${
          diyItem.style.bg_status == 1 ? diyItem.style.bg : 'none'
        }`,
        `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
      ]"
    >
      <template v-for="(nav, idx) in diyItem.data" :key="idx">
        <div class="diy-nav-bar-item">
          <div class="diy-nav-bar-item-block">
            <img :src="nav.img" v-if="diyItem.layout.value == 1" />
            <div
              class="text"
              :style="{ color: nav.color }"
              :class="nav.fw == 1 ? 'fw' : ''"
            >
              {{ nav.title }}
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>


<script lang="ts">
export default {
  name: "storeDiyPreviewNavBar",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import { diyNavBarDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem: diyNavBarDataType;
    index: number | string;
  }>(),
  {
    diyItem: () => {
      return {
        layout: {
          value: 1,
          rows_num: 4,
        },
        style: {
          bg_status: 1,
          bg: "",
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: [],
        default_data: {
          title: "",
          img: "",
          link: {},
          fw: 0,
          color: "",
        },
      };
    },
    index: 0,
  }
);
</script>


<style scoped>
/*图文导航*/
.diy-nav-bar .diy-nav-bar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: center;
  padding: 5px;
}

.diy-nav-bar .diy-nav-bar-item {
  padding: 10px;
}
.diy-nav-bar .diy-nav-bar-list.rows-3 .diy-nav-bar-item {
  width: calc(33.3% - 20px);
}

.diy-nav-bar .diy-nav-bar-list.rows-4 .diy-nav-bar-item {
  width: calc(25% - 20px);
}
.diy-nav-bar .diy-nav-bar-list.rows-5 .diy-nav-bar-item {
  width: calc(20% - 20px);
}

.diy-nav-bar-item-block img {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.diy-nav-bar-item-block .text {
  line-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>